<template>
  <div class="view-container-wrapper" ref="view-container-wrapper">
      <div @click="goBack">返回</div>
       <div
          class="view-container"
          v-for="(item, idx) in info"
          :key="'show' + idx"
          v-show="!item.isHidden"
          :style="{
            ...item.style,
            width: `${item.wScale * 100}%`,
            height: `${item.hScale * 100}%`,
            top: `${item.tScale * 100}%`,
            left: `${item.lScale * 100}%`,
            'z-index': item.lel
          }"
        >
          <!----图表charts---->
          <component :is="item.component"  :options="item.options" />
       </div>
  </div>
</template>

<script>
import MyVideo from '@/components/my-video';
import MyEcharts from '@/components/my-echarts';
import MyText from '@/components/my-text';
import MyMap from '@/components/my-map';     
import {mapState, mapMutations} from 'vuex';

export default {
    data() {
        return {
            arr: [],
            showArr: []
        }
    },
    methods: {
        ...mapMutations('home', ['GET_SHOW_LIST', 'GET_INFO']),
        goBack () {
            this.$router.push('/home')
        }
    },
    computed: {
        ...mapState('home', ['showList', 'info']),
        detailList () {
           return this.info || []
        },
    },
    components: {
        MyVideo,
        MyEcharts,
        MyText,
        MyMap,
  },
}
</script>

<style scoped>
.view-container-wrapper {
    position: relative;
    height: 100vh;
    background: rgb(14, 35, 61);
    background-image: 
        linear-gradient(rgb(14, 35, 61) 14px, transparent 0),
        linear-gradient(90deg, white 1px, transparent 0);
    background-size: 15px 15px, 15px 15px;
     /* background: rgba(255, 255, 255, .5);
    background-image: 
            linear-gradient(#aaa 1px, transparent 0),
            linear-gradient(90deg, #aaa 1px, transparent 0);
          background-size: 8px 8px */
}
.view-container {
    /* width: 100%;
    height: 100%; */
    width: 100px;
    height: 100px;
    position: absolute;
}
</style>